<template>
	<view class="content">
		<u-navbar
			title="登录" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		
		<view class="content-page">
			<view class="hellow">
				您好，欢迎来到淘京收
			</view>
			<view class="one-btn">
				<view class="phone-input">
					<input :value="tel" @input="telChanged" type="tel" placeholder="请输入手机号码" style="flex: 1 1 0%; width: 100%; height: 100%; background: rgb(241, 241, 241); border-radius: 8px; line-height: 100%; padding-left: 15px; box-sizing: border-box;"/>
				</view>
				<view class="flex-b">
					<view class="phone-input">
						<input :value="code" @input="codeChanged" type="number" placeholder="请输入验证码" style="flex: 1 1 0%; width: 100%; height: 100%; background: rgb(241, 241, 241); border-radius: 8px; line-height: 100%; padding-left: 15px; box-sizing: border-box;" />
					</view>
					<view class="code-counter" v-if="codeCounting" @click="notify(`${codeCounter}秒后重新发送`)">
						{{codeCounter}}秒重新发送
					</view>
					<u-button plain color="#e33233" @click="clickSendCode" v-else
						custom-style="width: 145px;height:52px;border: 2px solid #e33233;margin-left:10px;">发送验证码</u-button>
				</view>
				<u-button :color="`${mainColor}`" @click="clickLogin"
					:custom-style="{color:`${textColor}`,height: '52px', fontSize: '16px', fontWeight: '500', marginBottom: '20px', borderRadius: '8px'}">登录</u-button>
				<view class="select-text flex-a">
					<u-checkbox-group v-model="checked" @change="checkChanged">
						<u-checkbox name="checkbox" shape="circle"
							:active-color="`${mainColor}`"></u-checkbox>
					</u-checkbox-group>
					<view>未注册的手机号登录后将自动生成平台账号，且代表您已阅读并同意<text class="link" @click="clickUserAgreement">《用户协议》</text>和<text class="link" @click="clickPrivacyAgreement">《隐私协议》</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { login, sendSMS } from '@/api';
	import { systemInfo } from '@/utils/mixin';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				tel: '',
				code: '',
				isAgree: false,
				codeCounter: 0,
				codeCounting: false,
				timerId: null,
				checked: []
			}
		},
		onLoad() {
			this.getSystemInfo();
			if (uni.getStorageSync('agreement') || false) {
				this.checked = ['checkbox'];
			}
		},
		onHide() {
			this.clearCodeCounter();
		},
		methods: {
			telChanged({detail}) {
				this.tel = detail.value.trim();
			},
			codeChanged({detail}) {
				this.code = detail.value.trim();
			},
			checkChanged(checked) {
				this.isAgree = checked.length === 1;
			},
			async clickSendCode() {
				if (this.tel.length === 0) {
					this.notify('手机号码不能为空！');
					return
				}
				
				if (this.tel.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.tel)) {
					this.notify('手机号码格式不正确！');
					return
				}
				
				const res = await sendSMS(this.tel, 'login');
				if (res.code === 2000) {
					this.notify('验证码发送成功');
					this.code = '';
					this.codeCounter = 120;
					this.codeCounting = true;
					this.timerId = setInterval(() => {
						this.codeCounter -= 1;
						if (this.codeCounter <= 0) {
							this.clearCodeCounter();
						}
					}, 1000)
				}
				
				if (res.data.code) {
					this.notify(`验证码：${res.data.code}`, 3000);
				}
			},
			async clickLogin() {
				if (this.tel.length === 0) {
					this.notify('手机号码不能为空！');
					return
				}
				
				if (this.tel.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.tel)) {
					this.notify('手机号码格式不正确！');
					return
				}
				
				if (this.code.length === 0) {
					this.notify('验证码不能为空！');
					return
				}
				
				if (this.checked.length == 0) {
					uni.showModal({
						content:'请确认您已阅读并同意《用户协议》和《隐私协议》',
						success: ({confirm}) => {
							if(confirm) {
								this.checked = ['checkbox'];
								uni.setStorageSync('agreement', true);
							}
						}
					});
					return
				}
				uni.setStorageSync('agreement', true);
				const res = await login(this.tel, this.code);
				if (res.code == 2000) {
					uni.reLaunch({
						url:'/pages/index/index'
					});
					this.$store.state.tabIndex = 0;
				} else {
					this.notify(res.msg);
					this.code = '';
				}
			},
			clickUserAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=user&title=用户协议'
				})
			},
			clickPrivacyAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=privacy&title=隐私协议'
				})
			},
			clearCodeCounter() {
				this.codeCounter = 0;
				this.codeCounting = false;
				if (this.timerId) {
					clearInterval(this.timerId);
					this.timerId = null;
				}
			},
			notify(message, duration) {
				uni.showToast({
					icon:'none',
					title:message,
					duration:duration||1500
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.content-page {
    padding: 31px 10px 0;
    position: relative;
	
	.hellow {
	    font-weight: 500;
	    margin-top: 83px;
	    color: #333;
	    margin-bottom: 20px;
	}
	
	.one-btn {
		.phone-input {
		    width: 100%;
		    height: 52px;
		    line-height: 52px;
		    box-sizing: border-box;
		    background-color: #f1f1f1;
		    margin-bottom: 20px;
		}
		
		.code-counter {
		    width: 145px;
		    height: 52px;
		    box-sizing: border-box;
		    font-size: 12px;
		    line-height: 49px;
		    text-align: center;
		    border: 2px solid #e33233;
		    background-color: #fff;
		    margin-left: 10px;
		    color: #e33233;
		}
	}
	
	.select-text {
	    font-size: 12px;
		
		.link {
		    color: #e33233;
		}
	}
}
</style>
